<template>
    <div>
        <top-bar></top-bar>
        <left-bar :datas='data'></left-bar>
        <div class="system">
            <home-bar :currentPage='currentPage'></home-bar>
            <div class="order-main system-main">
                <div class="main-position">
                    首页 > 资讯中心 > {{title}}
                    <a href="javascript:void(0);"><i class="el-icon-refresh"></i></a>
                </div>
                <div class="main-height"></div>
                <div class="main-mains">
                    <div class="main-top-nav">
                        <ul>
                            <router-link to="/relationsList/0" @click.native="addPath('/relationsList/1','资讯中心','平台公告','0')">
                                <li :class="{active:this.$route.params.id==='0'}">平台公告</li>
                            </router-link>
                            <router-link to="/relationsList/1" @click.native="addPath('/relationsList/2','资讯中心','医药咨询','1')">
                                <li :class="{active:this.$route.params.id==='1'}">医药咨询</li>
                            </router-link>
                            <router-link to="/relationsList/2" @click.native="addPath('/relationsList/3','资讯中心','商学院','2')">
                                <li :class="{active:this.$route.params.id==='2'}">商学院</li>
                            </router-link>
                            <router-link to="/relationsList/3" @click.native="addPath('/relationsList/4','资讯中心','安全保障','3')">
                                <li :class="{active:this.$route.params.id==='3'}">安全保障</li>
                            </router-link>
                            <router-link to="/relationsList/4" @click.native="addPath('/relationsList/5','资讯中心','常见问题','4')">
                                <li :class="{active:this.$route.params.id==='4'}">常见问题</li>
                            </router-link>
                        </ul>
                    </div>
                    <div class="relationsList-table">
                        <table>
                            <tr>
                                <th>序号</th>
                                <th>标题</th>
                                <th>预览图片</th>
                                <th>时间</th>
                                <th>作者</th>
                            </tr>
                            <tr v-for="(item,index) in dataLists" :key="index" :class="{active:index%2==1}">
                                <td>{{index+1}}</td>
                                <td>
                                    <router-link :to="{name:'detailstxt',params:{id:item.id}}">
                                        {{item.title}}
                                    </router-link>
                                </td>
                                <td>
                                    <img src="../images/banner.jpg" alt="">
                                </td>
                                <td>{{item.update_time | times}}</td>
                                <td>{{item.author}}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="pageBotom">
                        <div class="pageBotomRight">
                            <el-pagination @current-change="handleCurrentChange" :page-size="15" layout="total, prev, pager, next" :total='totalnum'>
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import topBar from "../public/top";
import leftBar from "../public/left";
import homeBar from "../public/homebar";
export default {
  components: {
    leftBar,
    topBar,
    homeBar
  },
  data() {
    return {
      data: "/relations",
      currentPage: {
        path: "/relations",
        name: "资讯中心"
      },
      title: "平台公告",
      type: "",
      totalnum: "",
      dataLists: []
    };
  },
  methods: {
    addPath(n1, n2, n3, nums) {
      //点击切换home-bar
      var obj = {};
      obj.n1 = n1;
      obj.n2 = n2;
      this.title = n3;
      this.$store.commit("addPath", obj);
      this.type = nums;
      this.dataList(nums, 1);
    },
    handleCurrentChange(val) {
      this.dataList(this.type, val);
    },
    dataList(num, nums) {
      let _this = this;
      let ourls =
        this.urls +
        "/adm/user/refreshToken/" +
        localStorage.getItem("uid") +
        "/" +
        localStorage.getItem("token");
      checkTime(
        new Date().getTime() / 1000,
        ourls,
        localStorage.getItem("reToken")
      );
      _this
        .$http({
          url:
            _this.urls +
            "/who/Article/getDataList/" +
            localStorage.getItem("uid") +
            "/" +
            localStorage.getItem("token"),
          method: "post",
          data: {
            type: num,
            page: nums
          }
        })
        .then(function(res) {
          let data = res.data;
          console.log(data);
          if (data.code == "1") {
            _this.totalnum = data.data.total;
            _this.dataLists = data.data.data;
          } else {
            invalid(data.msg);
            _this.$message.error(data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  watch: {
    $route(to, form) {}
  },
  activated() {
    this.type = this.$route.params.id;
    this.dataList(this.$route.params.id, 1);
  },
  filters: {
    times(value) {
      var time = new Date(value * 1000);
      var month =
        time.getMonth() + 1 > 9
          ? time.getMonth() + 1
          : "0" + (time.getMonth() + 1);
      var data = time.getDate() > 9 ? time.getDate() : "0" + time.getDate();
      var hour = time.getHours() > 9 ? time.getHours() : "0" + time.getHours();
      var minutes =
        time.getMinutes() > 9 ? time.getMinutes() : "0" + time.getMinutes();
      var second =
        time.getSeconds() > 9 ? time.getSeconds() : "0" + time.getSeconds();
      var times =
        time.getFullYear() +
        "-" +
        month +
        "-" +
        data +
        " " +
        hour +
        ":" +
        minutes +
        ":" +
        second;
      return times;
    }
  }
};
</script>

<style lang="less">
@import "relations.less";
</style>
